<template>
  <el-form ref="userEduForm" :model="userEdus" :rules="userEduExsRules" label-width="120px" class="demo-ruleForm"
    size="default" status-icon>
    <p style="font-size: 24px;margin-bottom: 30px;padding-top: 10px;padding-left: 20px;">教育经历</p>
    <el-form-item label="学习名称" prop="schoolName" style="margin-top: 10px;">
      <el-input v-model="userEdus.schoolName" style="width: 300px;" />
    </el-form-item>
    <!-- <el-form-item label="最高学历" prop="education" style="margin-top: 10px;">
      <el-input v-model="userEdus.education" style="width: 300px;" />
    </el-form-item> -->
    <el-form-item label="最高学历" style="width: 295px;" prop="major">
      <el-select v-model="userEdus.education" placeholder="请选择">
        <el-option label="本科" value="本科" />
        <el-option label="研究生" value="研究生" />
      </el-select>
    </el-form-item>
    <el-form-item label="所学专业" prop="major" style="margin-top: 10px;">
      <el-input v-model="userEdus.major" style="width: 300px;" />
    </el-form-item>

    <el-form-item label="在校时间" prop="schoolTime" style="margin-top: 10px; width: 420px;">
      <el-date-picker v-model="userEdus.schoolTime" type="monthrange" range-separator="to"
        :start-placeholder=userEdus.schoolTime[0] :end-placeholder=userEdus.schoolTime[1] format="YYYY.MM"
        value-format="YYYY.MM" />

    </el-form-item>
    <el-form-item label="主修课程">
      <el-input v-model="userEdus.eduMajorDetail" :autosize="{ minRows: 5, maxRows: 10 }" type="textarea"
        placeholder="在校主修课程..." style="width: 800px;" />
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="saveInfo(userEduForm)">保存</el-button>
      <el-button @click="cancelEdit(userEduForm)">取消</el-button>
    </el-form-item>
  </el-form>

</template>
<script lang='ts' setup>
import { ref, onMounted, getCurrentInstance, reactive } from 'vue'
import { useStore } from "vuex"
import { upUserInfo } from "@/api/userApi"
import type { FormInstance } from 'element-plus'
import { userEdus, userEduExsRules } from "@/utills/userInfoValidators"
import { elmessage, data } from "@/hook/hook"
import { useRouter } from "vue-router"
const store = useStore()
const router = useRouter()
const userEduForm = ref<FormInstance>()
// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例

onMounted(() => {
  userEdus.schoolName = store.state.userState.userEdu.schoolName
  userEdus.education = store.state.userState.userEdu.education
  userEdus.major = store.state.userState.userEdu.major
  userEdus.schoolTime = store.state.userState.userEdu.schoolTime
  userEdus.eduMajorDetail = store.state.userState.userEdu.eduMajorDetail
})

// 提交按钮
const saveInfo = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      store.commit("upUserEdu", userEdus)
      store.commit("editEdu")
      // 将信息提交给后端
      const updata = { ...data(), ...userEdus, ...{ upPart: "eduInfo" } }


      upUserInfo(updata).then((res: any) => {
        if (res.data["code"] == "200") {

          
          elmessage(res.data["message"], res.data["type"])
        } else if (res.data["code"] == "300") {
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/login")
          }, 500);
          localStorage.clear()
        } else {
          console.log(res.data);

        }

      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 取消按钮
function cancelEdit(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.resetFields()
  store.commit("editEdu")
}


</script>
<style scoped>
.demo-ruleForm {
  height: 500px;
}

.demo-ruleForm:hover {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}
</style>